<template>
  <div>
    <el-dialog :title="title" :close-on-click-modal="false" v-dialogDrag :visible.sync="visible">

      <el-steps :active="active" align-center v-if="inputForm.vehicleType !=3">
        <el-step title="基本信息"></el-step>
        <el-step title="地址信息"></el-step>
      </el-steps>
      <br />

      <el-form :model="inputForm" ref="inputForm" v-loading="loading" :class="method === 'view' ? 'readonly' : ''"
        :disabled="method === 'view'" label-width="120px">
        <el-row :gutter="15">
          <div v-show="active == 1" style="margin-top: 20px">
            <el-col :span="12">
              <el-form-item label="标题" prop="title" :rules="[]">
                <el-input v-model="inputForm.title" placeholder="请填写标题"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发布人" prop="user.id" :rules="[
                  {
                    required: true,
                    message: '发布人不能为空',
                    trigger: 'blur',
                  },
                ]">
                <GridSelect title="选择发布人" labelName="nikeName" labelValue="id" :value="inputForm.user.id" :limit="1"
                  @getValue="
                    (value) => {
                      inputForm.user.id = value;
                    }
                  " :columns="[
                    {
                      prop: 'id',
                      label: '主键',
                    },
                    {
                      prop: 'phone',
                      label: '手机号(账号唯一)',
                    },
                    {
                      prop: 'nikeName',
                      label: '昵称',
                    },
                  ]" :searchs="[
                    {
                      prop: 'phone',
                      label: '手机号(账号唯一)',
                    },
                  ]" dataListUrl="/userinfo/tUserInfo/list" entityBeanName="tUserInfo"
                  queryEntityUrl="/userinfo/tUserInfo/queryById">
                </GridSelect>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="所属门店" prop="store.id" :rules="[
                  {
                    required: true,
                    message: '门店不能为空',
                    trigger: 'blur',
                  },
                ]">
                <GridSelect title="选择所属门店" labelName="storeName" labelValue="id" :value="inputForm.store.id" :limit="1"
                  @getValue="
                    (value) => {
                      inputForm.store.id = value;
                    }
                  " :columns="[
                    {
                      prop: 'storeName',
                      label: '门店名称',
                    },
                    {
                      prop: 'officeAddress',
                      label: '办公地址',
                    },
                    {
                      prop: 'storeContactNumber',
                      label: '门店联系电话',
                    },
                    {
                      prop: 'legalName',
                      label: '联系人',
                    },
                    {
                      prop: 'contactPhoneNumber',
                      label: '联系人电话',
                    },
                  ]" :searchs="[
                    {
                      prop: 'storeName',
                      label: '门店名称',
                    },
                    {
                      prop: 'storeContactNumber',
                      label: '门店联系电话',
                    },
                  ]" dataListUrl="/distributor/vDistributor/list" entityBeanName="vDistributor"
                  queryEntityUrl="/distributor/vDistributor/queryById">
                </GridSelect>
              </el-form-item>
            </el-col> -->
            <!-- <el-col :span="12">
              <el-form-item label="业务随机编号" prop="businessNo" :rules="[]">
                <el-input
                  v-model="inputForm.businessNo"
                  placeholder="请填写业务随机编号"
                ></el-input>
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="售卖类型" prop="vehicleType" :rules="[]">
                <el-select v-model="inputForm.vehicleType" placeholder="请选择" style="width: 100%">
                  <el-option label="到店新车" value="1"></el-option>
                  <el-option label="二手车" value="2"></el-option>
                  <el-option label="在售车系" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车辆类型" prop="vehicleClassification" :rules="[]">
                <el-select v-model="inputForm.vehicleClassification" placeholder="请选择车辆类型" style="width: 100%">
                  <el-option v-for="item in $dictUtils.getDictList('vehicle_type')" :key="item.value"
                    :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
                <!-- <el-input v-model="inputForm.vehicleClassification" placeholder="请填写车辆类型"></el-input> -->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车辆品牌" prop="vehicleBrandModel" :rules="[]">

                <el-select v-model="vehicle_brand" placeholder="请选择车辆品牌" @change="handleChange" filterable>
                  <el-option
                    v-for="item in vehicleBrandList" :key="item.value" :label="item.label" :value="item.value" > </el-option>
                </el-select>

                <!-- <el-cascader v-model="inputForm.vehicleBrandModel"   :options="options" filterable
                  @change="handleChange"   style="width: 100%" separator="|">
                </el-cascader> -->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车辆型号" prop="vehicleBrandModel" :rules="[]">

                <el-select v-model="vehicle_model" placeholder="请选择车辆型号" filterable> 
                  <el-option
                    v-for="item in vehicleModelList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>

                <!-- <el-cascader v-model="inputForm.vehicleBrandModel"   :options="options" filterable
                  @change="handleChange"   style="width: 100%" separator="|">
                </el-cascader> -->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车型" prop="model" :rules="[]">
                <el-select v-model="inputForm.model" placeholder="请选择车型" style="width: 100%">
                  <el-option label="小型车" value="小型车"></el-option>
                  <el-option label="中型车" value="中型车"></el-option>
                  <el-option label="大型车" value="大型车"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="燃油类型" prop="fuelType" :rules="[]">
                <el-select v-model="inputForm.fuelType" placeholder="请选择燃油类型" style="width: 100%">
                  <el-option label="汽油" value="1"></el-option>
                  <el-option label="柴油" value="2"></el-option>
                  <el-option label="新能源" value="3"></el-option>
                  <el-option label="油电混合" value="4"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="inputForm.vehicleType == 2">
              <el-form-item label="里程（KM）" prop="mileage" :rules="[]">
                <el-input v-model="inputForm.mileage" placeholder="请填写里程（KM）"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车身颜色" prop="exteriorColor" :rules="[]">
                <el-input v-model="inputForm.exteriorColor" placeholder="请填写车身颜色"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="inputForm.vehicleType == 2">
              <el-form-item label="过户次数" prop="numberTransfer" :rules="[]">
                <el-input v-model="inputForm.numberTransfer" placeholder="请填写过户次数"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="inputForm.vehicleType == 2">
              <el-form-item label="首次上牌时间" prop="licensingTimeYear" :rules="[]">
                <el-input v-model="inputForm.licensingTimeYear" placeholder="请填写首次上牌时间年" style="width: 40%"></el-input>年
                <el-input v-model="inputForm.licensingTimeMonth" placeholder="请填写首次上牌时间月" style="width: 40%"></el-input>月
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12" v-if="inputForm.vehicleType == 2">
              <el-form-item label="首次上牌时间月" prop="licensingTimeMonth" :rules="[]">
                <el-input v-model="inputForm.licensingTimeMonth" placeholder="请填写首次上牌时间月"></el-input>
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="排放标准" prop="emissionStandard" :rules="[]">
                <el-select v-model="inputForm.emissionStandard" placeholder="请选择排放标准" style="width: 100%">
                  <el-option v-for="item in $dictUtils.getDictList('emission_standards')" :key="item.value"
                    :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="变速箱" prop="transmissionCase" :rules="[]">
                <el-select v-model="inputForm.transmissionCase" placeholder="请选择变速箱" style="width: 100%">
                  <el-option label="自动" value="1"></el-option>
                  <el-option label="手动" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="车身结构" prop="bodyStructureDoors" :rules="[]">
                <el-select v-model="inputForm.bodyStructureDoors" placeholder="请选择车身结构-门" style="width: 30%">
                  <el-option label="一" value="一"></el-option>
                  <el-option label="两" value="两"></el-option>
                  <el-option label="三" value="三"></el-option>
                  <el-option label="四" value="四"></el-option>
                  <el-option label="五" value="五"></el-option>
                </el-select>门
                <el-select v-model="inputForm.bodyStructureSeat" placeholder="请选择车身结构-座" style="width: 30%">
                  <el-option label="一" value="一"></el-option>
                  <el-option label="两" value="两"></el-option>
                  <el-option label="三" value="三"></el-option>
                  <el-option label="四" value="四"></el-option>
                  <el-option label="五" value="五"></el-option>
                  <el-option label="六" value="六"></el-option>
                  <el-option label="七" value="七"></el-option>
                  <el-option label="八" value="八"></el-option>
                  <el-option label="九" value="九"></el-option>
                </el-select>座
                <el-select v-model="inputForm.bodyStructureVehicle" placeholder="请选择车身结构-厢" style="width: 30%">
                  <el-option label="一" value="一"></el-option>
                  <el-option label="两" value="两"></el-option>
                  <el-option label="三" value="三"></el-option>
                  <el-option label="四" value="四"></el-option>
                  <el-option label="五" value="五"></el-option>
                </el-select>厢
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="车座数量" prop="bodyStructureSeat" :rules="[]">
               
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车厢数量" prop="bodyStructureVehicle" :rules="[]">
               
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="排量" prop="displacement" :rules="[]">
                <el-input v-model="inputForm.displacement" placeholder="请填写排量"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="inputForm.vehicleType != 3">
              <el-form-item label="售价（万）" prop="price" :rules="[]">
                <el-input v-model="inputForm.price" placeholder="请填写售价（万）"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="inputForm.vehicleType == 3">
              <el-form-item label="区间价格（万）" prop="intervalPrice" :rules="[]">
                <el-input v-model="inputForm.intervalPrice" placeholder="请填写区间价格（万）"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话" prop="contactNumber" :rules="[]">
                <el-input v-model="inputForm.contactNumber" placeholder="请填写联系电话"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="inputForm.vehicleType == 2">
              <el-form-item label="车况描述" prop="vehicleConditionDescription" :rules="[]">
                <el-input type="textarea" v-model="inputForm.vehicleConditionDescription" placeholder="请填写车况描述">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="车辆封面图片" prop="vehicleCoverPicture" :rules="[]">
                <el-upload ref="vehicleCoverPicture" v-if="visible" list-type="picture-card"
                  :action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/vehicleinformation/vVehicleInformation`"
                  :headers="{ token: $cookie.get('token') }" :on-preview="
                    (file, fileList) => {
                      showImg(file.url);
                    }
                  " :on-success="
                    (response, file, fileList) => {
                      inputForm.vehicleCoverPicture = fileList
                        .map(
                          (item) =>
                            (item.response && item.response.url) || item.url
                        )
                        .join('|');
                    }
                  " :on-remove="
                    (file, fileList) => {
                      $http
                        .post(
                          `/sys/file/webupload/deleteByUrl?url=${
                            (file.response && file.response.url) || file.url
                          }`
                        )
                        .then(({ data }) => {
                          $message.success(data.msg);
                        });
                      inputForm.vehicleCoverPicture = fileList
                        .map((item) => item.url)
                        .join('|');
                    }
                  " :before-remove="
                    (file, fileList) => {
                      return $confirm(`确定移除 ${file.name}？`);
                    }
                  " multiple :limit="5" :on-exceed="
                    (files, fileList) => {
                      $message.warning(
                        `当前限制选择 5 个文件，本次选择了 ${
                          files.length
                        } 个文件，共选择了 ${
                          files.length + fileList.length
                        } 个文件`
                      );
                    }
                  " :file-list="vehicleCoverPictureArra">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="inputForm.vehicleType == 3">
              <el-form-item label="车辆图片" prop="vehiclePictures" :rules="[]">
                <el-upload ref="vehiclePictures" v-if="visible" list-type="picture-card"
                  :action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/vehicleinformation/vVehicleInformation`"
                  :headers="{ token: $cookie.get('token') }" :on-preview="
                    (file, fileList) => {
                      showImg(file.url);
                    }
                  " :on-success="
                    (response, file, fileList) => {
                      inputForm.vehiclePictures = fileList
                        .map(
                          (item) =>
                            (item.response && item.response.url) || item.url
                        )
                        .join('|');
                    }
                  " :on-remove="
                    (file, fileList) => {
                      $http
                        .post(
                          `/sys/file/webupload/deleteByUrl?url=${
                            (file.response && file.response.url) || file.url
                          }`
                        )
                        .then(({ data }) => {
                          $message.success(data.msg);
                        });
                      inputForm.vehiclePictures = fileList
                        .map((item) => item.url)
                        .join('|');
                    }
                  " :before-remove="
                    (file, fileList) => {
                      return $confirm(`确定移除 ${file.name}？`);
                    }
                  " multiple :limit="5" :on-exceed="
                    (files, fileList) => {
                      $message.warning(
                        `当前限制选择 5 个文件，本次选择了 ${
                          files.length
                        } 个文件，共选择了 ${
                          files.length + fileList.length
                        } 个文件`
                      );
                    }
                  " :file-list="vehiclePicturesArra">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="车身外观" prop="bodyAppearance" :rules="[]">
                <el-upload ref="bodyAppearance" v-if="visible" list-type="picture-card"
                  :action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/vehicleinformation/vVehicleInformation`"
                  :headers="{ token: $cookie.get('token') }" :on-preview="
                    (file, fileList) => {
                      showImg(file.url);
                    }
                  " :on-success="
                    (response, file, fileList) => {
                      inputForm.bodyAppearance = fileList
                        .map(
                          (item) =>
                            (item.response && item.response.url) || item.url
                        )
                        .join('|');
                    }
                  " :on-remove="
                    (file, fileList) => {
                      $http
                        .post(
                          `/sys/file/webupload/deleteByUrl?url=${
                            (file.response && file.response.url) || file.url
                          }`
                        )
                        .then(({ data }) => {
                          $message.success(data.msg);
                        });
                      inputForm.bodyAppearance = fileList
                        .map((item) => item.url)
                        .join('|');
                    }
                  " :before-remove="
                    (file, fileList) => {
                      return $confirm(`确定移除 ${file.name}？`);
                    }
                  " multiple :limit="5" :on-exceed="
                    (files, fileList) => {
                      $message.warning(
                        `当前限制选择 5 个文件，本次选择了 ${
                          files.length
                        } 个文件，共选择了 ${
                          files.length + fileList.length
                        } 个文件`
                      );
                    }
                  " :file-list="bodyAppearanceArra">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="仪表中控" prop="instrumentCentralControl" :rules="[]">
                <el-upload ref="instrumentCentralControl" v-if="visible" list-type="picture-card"
                  :action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/vehicleinformation/vVehicleInformation`"
                  :headers="{ token: $cookie.get('token') }" :on-preview="
                    (file, fileList) => {
                      showImg(file.url);
                    }
                  " :on-success="
                    (response, file, fileList) => {
                      inputForm.instrumentCentralControl = fileList
                        .map(
                          (item) =>
                            (item.response && item.response.url) || item.url
                        )
                        .join('|');
                    }
                  " :on-remove="
                    (file, fileList) => {
                      $http
                        .post(
                          `/sys/file/webupload/deleteByUrl?url=${
                            (file.response && file.response.url) || file.url
                          }`
                        )
                        .then(({ data }) => {
                          $message.success(data.msg);
                        });
                      inputForm.instrumentCentralControl = fileList
                        .map((item) => item.url)
                        .join('|');
                    }
                  " :before-remove="
                    (file, fileList) => {
                      return $confirm(`确定移除 ${file.name}？`);
                    }
                  " multiple :limit="5" :on-exceed="
                    (files, fileList) => {
                      $message.warning(
                        `当前限制选择 5 个文件，本次选择了 ${
                          files.length
                        } 个文件，共选择了 ${
                          files.length + fileList.length
                        } 个文件`
                      );
                    }
                  " :file-list="instrumentCentralControlArra">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="车厢座椅" prop="carSeat" :rules="[]">
                <el-upload ref="carSeat" v-if="visible" list-type="picture-card"
                  :action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/vehicleinformation/vVehicleInformation`"
                  :headers="{ token: $cookie.get('token') }" :on-preview="
                    (file, fileList) => {
                      showImg(file.url);
                    }
                  " :on-success="
                    (response, file, fileList) => {
                      inputForm.carSeat = fileList
                        .map(
                          (item) =>
                            (item.response && item.response.url) || item.url
                        )
                        .join('|');
                    }
                  " :on-remove="
                    (file, fileList) => {
                      $http
                        .post(
                          `/sys/file/webupload/deleteByUrl?url=${
                            (file.response && file.response.url) || file.url
                          }`
                        )
                        .then(({ data }) => {
                          $message.success(data.msg);
                        });
                      inputForm.carSeat = fileList
                        .map((item) => item.url)
                        .join('|');
                    }
                  " :before-remove="
                    (file, fileList) => {
                      return $confirm(`确定移除 ${file.name}？`);
                    }
                  " multiple :limit="5" :on-exceed="
                    (files, fileList) => {
                      $message.warning(
                        `当前限制选择 5 个文件，本次选择了 ${
                          files.length
                        } 个文件，共选择了 ${
                          files.length + fileList.length
                        } 个文件`
                      );
                    }
                  " :file-list="carSeatArra">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="车辆视频" prop="vehicleVideo" :rules="[]">
                <el-upload ref="vehicleVideo" v-if="visible"
                  :action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/vehicleinformation/vVehicleInformation`"
                  :headers="{ token: $cookie.get('token') }" :on-preview="
                    (file, fileList) => {
                      $window.location.href =
                        (file.response && file.response.url) || file.url;
                    }
                  " :on-success="
                    (response, file, fileList) => {
                      inputForm.vehicleVideo = fileList
                        .map(
                          (item) =>
                            (item.response && item.response.url) || item.url
                        )
                        .join('|');
                    }
                  " :on-remove="
                    (file, fileList) => {
                      $http
                        .post(
                          `/sys/file/webupload/deleteByUrl?url=${
                            (file.response && file.response.url) || file.url
                          }`
                        )
                        .then(({ data }) => {
                          $message.success(data.msg);
                        });
                      inputForm.vehicleVideo = fileList
                        .map((item) => item.url)
                        .join('|');
                    }
                  " :before-remove="
                    (file, fileList) => {
                      return $confirm(`确定移除 ${file.name}？`);
                    }
                  " multiple :limit="5" :on-exceed="
                    (files, fileList) => {
                      $message.warning(
                        `当前限制选择 5 个文件，本次选择了 ${
                          files.length
                        } 个文件，共选择了 ${
                          files.length + fileList.length
                        } 个文件`
                      );
                    }
                  " :file-list="vehicleVideoArra">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">添加相关附件</div>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出售状态" prop="saleStatus" :rules="[]">
                <el-select v-model="inputForm.saleStatus" placeholder="请选择" style="width: 100%">
                  <el-option label="未售" value="0"></el-option>
                  <el-option label="已售" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="上架状态" prop="shelfStatus" :rules="[]">
                <el-select v-model="inputForm.shelfStatus" placeholder="请选择" style="width: 100%">
                  <el-option label="未上架" value="0"></el-option>
                  <el-option label="已上架" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="审核状态" prop="auditStatus" :rules="[]">
                <el-select
                  v-model="inputForm.auditStatus"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in $dictUtils.getDictList('audit_type')"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <!-- <el-col :span="12">
              <el-form-item
                label="拒绝原因"
                prop="refuseReason"
                :rules="[
                  ]"
              >
                <el-input
                  type="textarea"
                  v-model="inputForm.refuseReason"
                  placeholder="请填写拒绝原因"
                ></el-input>
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="位置排序" prop="positionSort" :rules="[]">
                <el-input v-model="inputForm.positionSort" placeholder="请填写位置排序"></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="是否为推荐车源" prop="whetherRecommendedVehicle" :rules="[]">
                <el-select v-model="inputForm.whetherRecommendedVehicle" placeholder="请选择" style="width: 100%">
                  <el-option label="否" value="0"></el-option>
                  <el-option label="是" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="置顶到大首页" prop="whetherTopHome" :rules="[]">
                <el-select v-model="inputForm.whetherTopHome" placeholder="请选择" style="width: 100%">
                  <el-option label="置顶" value="0"></el-option>
                  <el-option label="不置顶" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="首页是否显示" prop="homeDisplay" :rules="[]">
                <el-select v-model="inputForm.homeDisplay" placeholder="请选择" style="width: 100%">
                  <el-option label="显示" value="0"></el-option>
                  <el-option label="不显示" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item
                label="是否复制数据"
                prop="copyData"
                :rules="[
                  ]"
              >
                <el-select
                  v-model="inputForm.copyData"
                  placeholder="请选择"
                  style="width: 100%;"
                >
                  <el-option
                    label="原始数据"
                    value="0"
                  ></el-option>
                  <el-option
                    label="复制数据"
                    value="1"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="是否共享" prop="isShare" :rules="[]">
                <el-select v-model="inputForm.isShare" placeholder="请选择" style="width: 100%">
                  <el-option label="不共享" value="0"></el-option>
                  <el-option label="共享" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item
                label="原始数据ID"
                prop="originalId"
                :rules="[
                  ]"
              >
                <el-input
                  v-model="inputForm.originalId"
                  placeholder="请填写原始数据ID"
                ></el-input>
              </el-form-item>
            </el-col> -->
            <!-- <el-col :span="12">
              <el-form-item
                label="是否为离职数据"
                prop="resignationData"
                :rules="[]"
              >
                <el-select
                  v-model="inputForm.resignationData"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in $dictUtils.getDictList('Incumbency_status')"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="首页置顶天数" prop="topSettingDays" :rules="[]">
                <el-input v-model="inputForm.topSettingDays" placeholder="请填写首页置顶天数"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="首页置顶时间" prop="topSettingTimes" :rules="[]">
                <el-input v-model="inputForm.topSettingTimes" placeholder="请填写首页置顶时间"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注信息" prop="remarks" :rules="[]">
                <el-input type="textarea" v-model="inputForm.remarks" placeholder="请填写备注信息"></el-input>
              </el-form-item>
            </el-col>
          </div>
          <div v-show="active == 2" style="margin-top: 20px">
            <el-col :span="24">
              <el-form-item label="看车地点" prop="carViewingPlace" :rules="[]">
                <el-input v-model="inputForm.carViewingPlace" ref="handleinput" id="handleinput" placeholder="请填写看车地点">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="经度" prop="longitude" :rules="[]">
                <el-input v-model="inputForm.longitude" placeholder="请填写经度"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="纬度" prop="latitude" :rules="[]">
                <el-input v-model="inputForm.latitude" placeholder="请填写纬度"></el-input>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="地图" prop="">
                <div ref="container" id="containepic"></div>
              </el-form-item>
            </el-col>
          </div>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="active !== 1" style="margin-top: 12px" @click="upper">上一步</el-button>
        <el-button v-if="active !== 2 && inputForm.vehicleType != 3" style="margin-top: 12px" @click="next">下一步
        </el-button>
        <el-button @click="visible = false">关闭</el-button>
        <el-button type="primary" v-if="method != 'view'" @click="doSubmit()" v-noMoreClick>确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  var that
  import GridSelect from "@/components/gridSelect";
  export default {
    data() {
      return {
        title: "",
        method: "",
        visible: false,
        loading: false,
        active: 1,
        vehicleCoverPictureArra: [],
        vehiclePicturesArra: [],
        bodyAppearanceArra: [],
        instrumentCentralControlArra: [],
        carSeatArra: [],
        vehicleVideoArra: [],
        modalKey: 0,
        vehicle_brand:'',
        vehicleBrandList:[],

        vehicle_model:'',
        vehicleModelList:[],
        inputForm: {
          id: "",
          user: {
            id: ""
          },
          store: {
            id: ""
          },
          title:"",
          businessNo: "",
          vehicleType: "",
          vehicleClassification: "",
          vehicleBrandModel: [],
          model: "",
          fuelType: "",
          carViewingPlace: "",
          longitude: "",
          latitude: "",
          mileage: "",
          exteriorColor: "",
          numberTransfer: "",
          licensingTimeYear: "",
          licensingTimeMonth: "",
          emissionStandard: "",
          transmissionCase: "",
          bodyStructureDoors: "",
          bodyStructureSeat: "",
          bodyStructureVehicle: "",
          displacement: "",
          price: "",
          intervalPrice: "",
          contactNumber: "",
          vehicleConditionDescription: "",
          vehicleCoverPicture: "",
          vehiclePictures: "",
          bodyAppearance: "",
          instrumentCentralControl: "",
          carSeat: "",
          vehicleVideo: "",
          saleStatus: "",
          shelfStatus: "",
          auditStatus: "",
          refuseReason: "",
          positionSort: "",
          whetherRecommendedVehicle: "",
          whetherTopHome: "",
          homeDisplay: "",
          copyData: "",
          isShare: "",
          originalId: "",
          resignationData: "",
          topSettingDays: "",
          topSettingTimes: "",
          remarks: "",
        },
        markersArray: [],
        options: [],
        // props: {
        //   lazy: true,
        //   lazyLoad(node, resolve) {
        //     console.log("--------------下--------------")
        //     console.log(node)
        //     console.log("--------------上--------------")
        //     const { level } = node;
        //     if (node.data && node.data.children) {
        //       resolve();
        //     } else {
        //       that.$http({
        //         url: `/vvehicleseries/vVehicleSeries/getlist`,
        //         method: "get",
        //         params: {
        //           brand: node.data
        //         }
        //       }).then(({ data }) => {
        //         data.list.forEach(item => {
        //           item.value = item.seriesName
        //           item.label = item.seriesName
        //           item.leaf = level >= 1
        //         })
        //         console.log(data.list.length);
        //         //二级数据
        //         resolve(data.list);
        //       })
        //     }

        //   }
        // }
      };
    },
    components: {
      GridSelect,
    },
    created() {
      that = this

    },
    methods: {
      showImg(url) {
        this.$hevueImgPreview(url);
      },
      next() {
        this.active++;
      },
      upper() {
        this.active--;
      },
      initMap(longitude, latitude) {
        var that = this;
        let address = "";
        let lat = "36.752508224779746";
        let logt = "119.97121810913086";
        if (!longitude) {
          let lat = latitude;
          let logt = longitude;
        }
        if (this.inputForm.latitude === "") {
          var center = new qq.maps.LatLng(lat, logt);
        } else {
          var center = new qq.maps.LatLng(
            this.inputForm.latitude,
            this.inputForm.longitude
          );
        }
        var map = new qq.maps.Map(document.getElementById("containepic"), {
          center: center,
          zoom: 13,
          disableDefaultUI: true,
        });
        var marker = new qq.maps.Marker({
          position: center,
          map: map,
        });
        that.markersArray.push(marker);
        var infoWin = new qq.maps.InfoWindow({
          map: map,
        }); //此处是点击地图后生成的地标名称
        var geocoder = new qq.maps.Geocoder({
          complete: function (res) {
            that.deleteOverlays();
            map.setCenter(res.detail.location);
            var marker = new qq.maps.Marker({
              map: map,
              position: res.detail.location,
            });
            that.markersArray.push(marker);
          },
        });

        qq.maps.event.addListener(map, "click", function (event) {
          that.deleteOverlays();
          // this.latitude = event.latLng.getLat();
          // this.longiistude = event.latLng.getLng();
          // console.log(this.longiistude, this.latitude);
          that.inputForm.longitude = event.latLng.getLng();
          that.inputForm.latitude = event.latLng.getLat();
          var position = new qq.maps.LatLng(
            that.inputForm.latitude,
            that.inputForm.longitude
          );
          var marker = new qq.maps.Marker({
            map: map,
            position: position,
          });
          that.markersArray.push(marker);
        });
        document
          .getElementById("handleinput")
          .addEventListener("blur", function () {
            // console.log("1111");
            geocoder.getLocation(that.inputForm.carViewingPlace);
          });
      },
      deleteOverlays() {
        if (this.markersArray) {
          for (var i in this.markersArray) {
            this.markersArray[i].setMap(null);
          }
          this.markersArray.length = 0;
        }
      },
      async init(method, id) {
        this.active = 1;
        this.method = method;
        this.inputForm.id = id;
        if (method === "add") {
          this.title = `新建车辆信息表`;
        } else if (method === "edit") {
          this.title = "修改车辆信息表";
        } else if (method === "view") {
          this.title = "查看车辆信息表";
        }
        this.vehicleCoverPictureArra = [];
        this.vehiclePicturesArra = [];
        this.bodyAppearanceArra = [];
        this.instrumentCentralControlArra = [];
        this.carSeatArra = [];
        this.vehicleVideoArra = [];
        this.visible = true;
        this.loading = false;


        this.$nextTick(() => {
          this.$refs.inputForm.resetFields();
          if (method === "edit" || method === "view") {
            // 修改或者查看
            this.loading = true;
            this.$http({
              url: `/vehicleinformation/vVehicleInformation/queryById?id=${this.inputForm.id}`,
              method: "get",
            }).then(async ({ data }) => {

              this.getSeriesAndBrand();
              this.inputForm = this.recover(
                this.inputForm,
                data.vVehicleInformation
              );
              // console.log( this.inputForm.vehicleBrandModel.split("|"));
              this.vehicle_brand =  this.inputForm.vehicleBrandModel.split("|")[0]
              console.log( this.vehicle_brand);
              this.handleChange(this.vehicle_brand)
              if (this.inputForm.vehicleBrandModel.split("|").length > 1){
                this.vehicle_model =  this.inputForm.vehicleBrandModel.split("|")[1]
              }
              this.initMap(this.inputForm.longitude, this.inputForm.latitude);
              this.inputForm.vehicleCoverPicture.split("|").forEach((item) => {
                if (item.trim().length > 0) {
                  this.vehicleCoverPictureArra.push({
                    name: decodeURIComponent(
                      item.substring(item.lastIndexOf("/") + 1)
                    ),
                    url: item,
                  });
                }
              });
              this.inputForm.vehiclePictures.split("|").forEach((item) => {
                if (item.trim().length > 0) {
                  this.vehiclePicturesArra.push({
                    name: decodeURIComponent(
                      item.substring(item.lastIndexOf("/") + 1)
                    ),
                    url: item,
                  });
                }
              });
              this.inputForm.bodyAppearance.split("|").forEach((item) => {
                if (item.trim().length > 0) {
                  this.bodyAppearanceArra.push({
                    name: decodeURIComponent(
                      item.substring(item.lastIndexOf("/") + 1)
                    ),
                    url: item,
                  });
                }
              });
              this.inputForm.instrumentCentralControl
                .split("|")
                .forEach((item) => {
                  if (item.trim().length > 0) {
                    this.instrumentCentralControlArra.push({
                      name: decodeURIComponent(
                        item.substring(item.lastIndexOf("/") + 1)
                      ),
                      url: item,
                    });
                  }
                });
              this.inputForm.carSeat.split("|").forEach((item) => {
                if (item.trim().length > 0) {
                  this.carSeatArra.push({
                    name: decodeURIComponent(
                      item.substring(item.lastIndexOf("/") + 1)
                    ),
                    url: item,
                  });
                }
              });
              this.inputForm.vehicleVideo.split("|").forEach((item) => {
                if (item.trim().length > 0) {
                  this.vehicleVideoArra.push({
                    name: decodeURIComponent(
                      item.substring(item.lastIndexOf("/") + 1)
                    ),
                    url: item,
                  });
                }
              });
              // console.log(this.inputForm.vehicleBrandModel.split("-"))

              
              // console.log(this.inputForm.vehicleBrandModel)
              this.modalKey = 1
              this.loading = false;
            });

          } else {
            this.getSeriesAndBrand()
            this.initMap();
          }
        });
      },
      //级联选择器点击时间
      handleChange(value) {
         console.log(value);
         this.vehicleModelList = []
         this.vehicle_model = ''
         var obj={}
          obj= this.vehicleBrandList.find(function(i){
            return i.brandName ===value
          });
          if (obj){
            this.getData(obj.id)
          }
      },
      // 表单提交
      doSubmit() {
        // alert(this.inputForm.vehicleBrandModel)
        if(this.vehicle_model !== ""){
          this.inputForm.vehicleBrandModel = this.vehicle_brand + "|" + this.vehicle_model
        // console.log(this.inputForm.vehicleBrandModel)
        } else {
          this.inputForm.vehicleBrandModel = this.vehicle_brand
        }
        this.$refs["inputForm"].validate((valid) => {
          if (valid) {
            this.loading = true;
            this.$http({
              url: `/vehicleinformation/vVehicleInformation/save`,
              method: "post",
              data: this.inputForm,
            }).then(({ data }) => {
              this.loading = false;
              if (data && data.success) {
                this.visible = false;
                this.$message.success(data.msg);
                this.$emit("refreshDataList");
              }
            });
          }
        });
      },
      //获取车辆品牌与车系
      getSeriesAndBrand(data2) {
        this.$http({
          url: `/vvehiclebrand/vVehicleBrand/list`,
          method: "get",
          params: {
            pageSize:-1 
          }
        }).then(({ data }) => {
          data.page.list.forEach(item => {
            item.value = item.brandName
            item.label = item.brandName
            // item.children = this.getData(item)
          })
          this.vehicleBrandList = data.page.list
          // this.arr = data.page.list

          // if (data2 != "" || data2 != undefined) {
          //   var target = Array.isArray(data2) ? data2[0] : String(data2).split("-")[0]
          //   var i = this.options.findIndex(item => target == item.brandName)
          //   // console.log(this.options[i], target, data2)
          //   // console.log(i)
          //   this.getData(this.options[i], i)
          //   // this.getData(this.options[0], 0)

          // }

        })
        console.log(this.options);
      },
      getData(item2) {
        this.$http({
          url: `/vvehicleseries/vVehicleSeries/getlist`,
          method: "get",
          params: {
            brand:{
              id: item2,
            },
            pageSize:-1 
          }
        }).then(({ data }) => {
          data.list.forEach(item => {
            item.value = item.seriesName
            item.label = item.seriesName
            item.leaf = true
          })
          this.vehicleModelList = data.list
          // this.options[0] = {
          //   ...this.options[0],
          //   children: data.list
          // }
          // this.options.map((item, index) => {
          //   if (index == i2) {
          //     this.options.splice(i2, 1, {
          //       ...this.options[i2],
          //       children: data.list,
          //       hasChildren: true
          //     })

          //   }
          // })
          // this.$set(this.options, i2, {
          //   ...item2,
          //   children: data.list
          // })
          // var j = this.inputForm.vehicleBrandModel.indexOf("-")
          // this.inputForm.vehicleBrandModel = [this.inputForm.vehicleBrandModel.substring(0, j), this.inputForm.vehicleBrandModel.substring(j + 1)]

          // this.inputForm.vehicleBrandModel = this.inputForm.vehicleBrandModel.split("-")
          // console.log(this.options[i2])
          // console.log(this.inputForm.vehicleBrandModel)

        })
      }

    },
  };
</script>